<head>
    <link href="../css/tale/style.min.css?v=v1.0" rel="stylesheet" type="text/css">
</head>
<v-box>
    <div class="col-md-6">
        <div class="panel panel-color panel-primary">
            <div class="panel-heading">
                <h1 class="panel-title">分类列表</h1>
            </div>
            <div class="panel-body margin" >
                <div class="btn-group m-b-10"  v-for="(cate,index) in categories" >
                            <button v-if="cate ==='默认分类'"  type="button" class="btn btn-warning  dropdown-toggle waves-effect waves-light"> {{cate}}({{index}})</button>

                        <button v-else type="button" :class="randColor()" data-toggle="dropdown" aria-expanded="false"> {{cate}}({{index}})<span
                                class="caret"></span></button>
                        <ul v-if="index != 0" class="dropdown-menu" role="menu">
                            <li><a  class="del-category" @click="deleteCategory(cate)">删除</a></li>
                        </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="panel   panel-pink">
            <div class="panel-heading">
                <h1 class="panel-title">标签列表</h1>
            </div>
            <div class="panel-body" >
                <div class="btn-group m-b-10" v-for="(tag,index) in tags" >
                    <button type="button"  :class="randColor()"
                            data-toggle="dropdown" aria-expanded="false"> {{tag}}({{index+1}})<span
                            class="caret"></span></button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a @click="deleteTag(tag)" class="del-category">删除</a></li>
                    </ul>
                </div>

            </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-body">
                <form id="cform" class="form-inline" role="form">
                    <input type="hidden" id="mid"/>
                    <div class="form-group">
                        <input type="text" class="form-control" id="newCategory" placeholder="请输入分类名称">
                    </div>
                    <button  type="button" @click="saveKind()"
                            class="btn btn-success waves-effect waves-light m-l-10">保存分类
                    </button>
                </form>
            </div>
        </div>
    </div>
</v-box>
<!--<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>-->
<script src="../js/jquery.app.js"></script>
<script>
    new Vue({
        el:"#app" ,
        data : {
           categories:Array,
           tags:Array,
        } ,
        methods : {
            deleteCategory:function (name) {
                //询问
                layer.confirm('您确定要删除 ？',{
                    icon: 1,
                    btn: ['确认','取消'] //按钮
                }, function(){
                    axios.get("/admin/category/delete/"+name).then(function (response) {
                        $.alert(response.data);
                        var t=setTimeout("window.location.reload()",1500)
                    });
                }, function(){
                });
            },
            deleteTag:function (tagName) {
                layer.confirm('您确定要删除 ？',{
                    icon: 1,
                    btn: ['确认','取消'] //按钮
                }, function(){
                    axios.get("/admin/tags/delete/"+tagName).then(function (response) {
                        $.alert(response.data);
                        var t=setTimeout("window.location.reload()",1500)
                    });
                }, function(){
                });
            },
            saveKind:function () {
                var name = $("#newCategory").val();
                axios.get("/admin/category/save/"+name).then(function (response) {
                    $.alert(response.data);
                    // 添加成功刷新页面
                    if(response.data.code == 1){
                        var t=setTimeout("window.location.reload()",1500)
                    }
                });
            },
            randColor: function() {
                const color = ["default","primary", "success", "info", "warning", "danger", "inverse", "purple", "pink"];
                const n1 = Math.floor(Math.random() * 8 + 1);
                if(0<=n1<=7){
                    return 'btn btn-'+color[n1]+'  dropdown-toggle waves-effect waves-light';
                }
                return 'btn btn-success  dropdown-toggle waves-effect waves-light';
            }
        } ,
        mounted : function () {
            var self = this;
            axios.get("/admin/category/manage").then(function (response) {
                self.categories = response.data.categories;
                self.tags = response.data.tags;
                console.log(response.data.categories)
                console.log(response.data.tags)
            });
        },
    })
</script>

